<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改密码</title>
    <link rel="icon" th:href="@{/img/icon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;padding-right: 10px;line-height: 38px;
        }

        .level-1{
            border-color: #f04040;
            background-color: #ffa0a0;
        }
        .level-2{
            border-color: #ff853c;
            background-color: #ffb78c;
        }
        .level-3{
            border-color: #FC0;
            background-color: #ffec8b;
        }
        .level-4{
            border-color: #8dff1c;
            background-color: #c3ff88;
        }
        .level-p{
            position: absolute;
            right: 5px;
            top: 5px;
            color: #333;
            font-weight: bold;
            display: none;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" action="" lay-filter="formDemo">
            <div class="layui-form layuimini-form">
                <div class="layui-form-item">
                    <label class="layui-form-label required">原密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="oldPassword" lay-verify="required" lay-reqtext="请输入旧密码" placeholder="请输入" class="layui-input" maxlength="32" onpaste="return false">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">新密码</label>
                    <div class="layui-input-block" style="position: relative">
                        <input type="password" name="password" lay-verify="required|password" lay-reqtext="请输入新密码" placeholder="请输入" class="layui-input" maxlength="32" onpaste="return false">
                        <p class="level-p"></p>
                        <tip>建议：长度不小于8位，且包含，大写英文字母、小写英文字母、数字和符号。<span class="showPassword" style="color: #1890ff;cursor: pointer">显示密码</span><span class="hidePassword" style="color: #1890ff;cursor: pointer;display: none">隐藏密码</span></tip>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="restPassword" lay-verify="required|password" lay-reqtext="请再次输入新密码" placeholder="请输入" class="layui-input" maxlength="32" onpaste="return false">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="saveBtn"> 保存 </button>
                        <tip>修改登录密码后，需要重新登录</tip>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-3.2.0.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/common-table.js}"></script>

<script type="text/javascript" th:inline="javascript">

    layui.use(['form','notice'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            notice = layui.notice;

        var ctxPath = /*[[@{/}]]*/;
        var baseUrl = ctxPath + 'sys/sys-user-info/';

        form.verify({
            password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        // 监听提交
        form.on('submit(saveBtn)', function (res) {
            var data = res.field;
            if(data.password == data.oldPassword){
                notice.error("新密码不能与旧密码相同！");
                return false;
            }
            if(data.password != data.restPassword){
                notice.error("两次密码输入不一致！");
                return false;
            }
            Asurplus.post({
                url: baseUrl + 'updatePassword/' + data.oldPassword + '/' + data.password
            }, function () {
                setTimeout(function () {
                    window.location.href = ctxPath + "loginOut"
                }, 1500)
            });
            return false;
        });

        // 判断密码强度
        $('body').on('input propertychange', 'input[name="password"]', function () {
            var value = $(this).val();
            let level = AnalyzePasswordSecurityLevel(value);
            if(0 == level){
                $(this).removeClass('level-1');
                $(this).removeClass('level-2');
                $(this).removeClass('level-3');
                $(this).removeClass('level-4');
                $('.level-p').hide();
            } else {
                $('.level-p').show();
                if(1 == level){
                    $('.level-p').text('密码太弱了！');
                    $(this).addClass('level-1');
                } else if(2 == level){
                    $('.level-p').text('密码比较弱哦！');
                    $(this).addClass('level-2');
                } else if(3 == level){
                    $('.level-p').text('密码较为安全！');
                    $(this).addClass('level-3');
                } else if(4 == level){
                    $('.level-p').text('密码很安全！');
                    $(this).addClass('level-4');
                }
            }
        });

        // 判断密码强度
        function AnalyzePasswordSecurityLevel(password) {
            var securityLevelFlag = 0;
            if (!password) {
                return 0;
            }
            else {
                if(/[a-z]/.test(password)){
                    securityLevelFlag++;
                }
                if(/[A-Z]/.test(password)){
                    securityLevelFlag++;
                }
                if(/[0-9]/.test(password)){
                    securityLevelFlag++;
                }
                if(containSpecialChar(password)){
                    securityLevelFlag++;
                }
                if(4 == securityLevelFlag && password.length < 8){
                    securityLevelFlag--;
                }
                return securityLevelFlag;
            }
        }
        // 是否包含特殊字符
        function containSpecialChar(str) {
            var containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
            return (containSpecial.test(str));
        }

        // 显示与隐藏
        $('body').on('click', '.showPassword', function () {
            $(this).parents('.layui-input-block').find('input').attr('type', 'text');
            $(this).hide();
            $('.hidePassword').show();
        });
        $('body').on('click', '.hidePassword', function () {
            $(this).parents('.layui-input-block').find('input').attr('type', 'password');
            $(this).hide();
            $('.showPassword').show();
        });
    });
</script>
</body>
</html>
